let dragLog = []; // 记录鼠标坐标
let anchorNodeId = null; // dragover也会发生在拖拽的锚点上，用于记录当前拖拽的节点id

export default (anchor, group, anchorCfg) => {
    // 鼠标移入锚点，改变状态样式
    anchor.on('mouseenter', e => {
        anchor.attr({
            cursor: 'crosshair'
        })
    });
    // 拖拽连线开始
    anchor.on('dragstart', e => {
        if (anchorNodeId === null) {
            const node = group.getFirst(); // Rect
            const item = group.get('item'); // Node
            const bBox = item.getBBox();
            const nodeId = node.get('id');
            const point = [ // x, y坐标
                bBox.width * (anchorCfg[0] - 0.5),
                bBox.height * (anchorCfg[1] - 0.5)
            ];
            // 保存开始点坐标
            dragLog = [e.x, e.y];
            const dashLine = group.addShape('path', {
                attrs: {
                    stroke: '#1890ff',
                    lineDash: [5, 5],
                    path: [
                        ['M', ...point],
                        ['L', ...point]
                    ]
                },
                className: 'dashed-line',
                pointStart: point
            })
            // 置于顶层
            dashLine.toFront();
            // 保存当前节点id
            anchorNodeId = nodeId;
        }
    });
    // 拖拽中，绘制连线
    anchor.on('drag', e => {
        const node = group.get('item');
        const keyShape = group.getFirst();
        const canvasBox = keyShape.get('canvasBox') || keyShape.get('canvasBBox');
        const dashLine = group.getItem('dashed-line');
        const pointStart = dashLine.get('pointStart');
        const pointEnd = [e.x - canvasBox.x - canvasBox.width / 2, e.y - canvasBox.y - canvasBox.height / 2]; // 距离中心点的x, y偏移量
        const offsetDistance = Math.sqrt(Math.pow(Math.abs(dragLog[0]) - Math.abs(e.x), 2) + Math.pow(Math.abs(dragLog[1]) - Math.abs(e.y), 2)); // 勾股定理计算直线距离
        // 鼠标移动距离超过10，开始计算角度并画线
        // 1px是为了让鼠标释放是 node:drag 事件监听到target，而不是当前虚线。
        if (offsetDistance > 10) {
            if (e.x >= dragLog[0]) {
                // 右下
                if (e.y >= dragLog[1]) {
                    pointEnd[0] -= 1;
                    pointEnd[1] -= 1;
                // 右上
                } else {
                    pointEnd[0] -= 1;
                    pointEnd[1] -= 1;
                }
            } else {
                // 左下
                if (e.y >= dragLog[1]) {
                    pointEnd[0] += 1;
                    pointEnd[1] += 1;
                // 左上
                } else {
                    pointEnd[0] += 1;
                    pointEnd[1] += 1;
                }
            }
        }
        // 画线
        dashLine.attr({
            path: [
                ['M', ...pointStart],
                ['L', pointEnd[0], pointEnd[1]]
            ]
        })
        
    });
    // 拖拽结束，删除虚线
    anchor.on('dragend', e => {
        const dashLine = group.getItem('dashed-line');
        dashLine.remove();
        anchorNodeId = null;
    });
    // 拖拽到其他锚点上
    anchor.on('dragenter', e => {
        // 排除相同节点的锚点
        if (e.target.cfg.nodeId !== anchorNodeId) {
            const { index } = e.target.cfg;
            if (group.getAllAnchorBg()[index]) {
                group.getAllAnchorBg()[index].attr('fillOpacity', 0.7);
            }
        }
    });
    // 拖拽离开事件
    anchor.on('dragleave', e => {
        // 排除相同节点的锚点
        if (e.target.cfg.nodeId !== anchorNodeId) {
            const { index } = e.target.cfg;
            if (group.getAllAnchorBg()[index]) {
                group.getAllAnchorBg()[index].attr('fillOpacity', 0.5);
            }
        }
    });
}